<!--  -->
<template>
  <div class='login_container'>
    <div class="left_mask"></div>

    <div class="login_form" v-if="!regStatus">
      <img class="login_logo" src="../assets/img/logo.png"/>

      <div class="slogan">
        <h2>新快乐教育</h2>
        <p>让学习更科学、更快乐、更有效</p>
      </div>

      <div class="form">
        <span>帐号</span>
        <a-input v-model="loginForm.userName" size="large"  />
        <span class="password">密码</span>
        <a-input-password v-model="loginForm.passWord" size="large" password />

        <a-button @click="submitForm" :loading="btnLoading" type="danger" danger size="large" class="btn_login">登 录</a-button>
      </div>

      <div class="tips">
        没有账号？  <span class="text" style="cursor: pointer;" @click="regStatus = true">注册</span>
      </div>
    </div>

    <div class="reg_form" v-else>
      <div class="reg_title">
        <img class="login_logo" src="../assets/img/logo.png"/>
        <h1>注册账号</h1>
      </div>

      <a-form class="reg_form_box" :form="regForm"  :colon="false"  >
        <!-- <a-form-item label="教师姓名" >
          <a-input v-model="regForm.name" size="large"/>
        </a-form-item>
        <a-form-item label="所在学校">
          <a-input v-model="regForm.name" size="large"/>
        </a-form-item>
        <a-form-item label="学科">
          <a-input v-model="regForm.name" size="large"/>
        </a-form-item>
        <a-form-item label="学段">
          <a-input v-model="regForm.name" size="large"/>
        </a-form-item> -->
        <a-form-item label="手机号">
          <a-input v-model="regForm.email" size="large"/>
        </a-form-item>
        <!-- <a-form-item label="课题编号">
          <a-input v-model="regForm.name" size="large"/>
        </a-form-item> -->
        <a-form-item label="密码">
          <a-input-password v-model="regForm.password" size="large" password />
        </a-form-item>
        <!-- <a-form-item label="确认密码">
          <a-input-password v-model="regForm.passwordcopy" size="large" password />
        </a-form-item> -->

        <a-button @click="createUser" :loading="btnLoading" type="danger" danger size="large" class="btn_login btn_reg">注册并登录</a-button>

        <!-- <a-form-item label="Activity zone">
          <a-select v-model="regForm.region" placeholder="please select your zone">
            <a-select-option value="shanghai">Zone one</a-select-option>
            <a-select-option value="beijing">Zone two</a-select-option>
          </a-select>
        </a-form-item> -->

        <div class="tips">
          已有账号？  <span class="text" style="cursor: pointer;" @click="regStatus = false">登录</span>
        </div>
        
      </a-form>

    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers, mapState} from "vuex";
let { mapMutations, mapActions } = createNamespacedHelpers("adminBasic");
export default {
  name: '',
  data() {
    return {
      regStatus: false,
      loginForm: {
        userName: "aiedu@example.com",
        passWord: "aiedu2024"
      },

      regForm: {
        email: '',
        password: '',
      },
    }
  },

  created() {
    
  },

  mounted() {
    ;
    (function(win) {
        var tid;

        function refreshRem() {
            let designSize = 1920; // 设计图尺寸
            let html = document.documentElement;
            let wW = html.clientWidth; // 窗口宽度
            let rem = wW * 100 / designSize;
            document.documentElement.style.fontSize = rem + 'px';
        }

        win.addEventListener('resize', function() {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }, false);
        win.addEventListener('pageshow', function(e) {
            if (e.persisted) {
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }
        }, false);

        refreshRem();

    })(window);
  },

  computed: {
    btnLoading() {
      return this.$store.state.btnLoading
    }
  },

  methods: {
    ...mapActions(["formGet","post"]),

    createUser() {
      this.$store.commit('setBtnLoading', true)
      this.post({
        API: 'createUser',
        data: this.regForm
      }).then(res => {
        if(res) {
          this.$message.success('注册成功');
          this.$store.commit('setBtnLoading', false)
          this.$router.push({
            name: 'InstructionalDesign'
          })
        }
      }).catch(err => {
        this.$message.error(err.response.data.detail);
        this.$store.commit('setBtnLoading', false)
      })
    },

    submitForm() {

      this.$store.commit('setBtnLoading', true)

      const formData = new FormData();
      formData.append("username", this.loginForm.userName);
      formData.append("password", this.loginForm.passWord);
      console.log(formData);

      this.$axios.post('/api/v1/login/access-token', formData).then(res => {
        let Authorization = `Bearer ${res.data.access_token}`
        localStorage.setItem('Authorization', Authorization);

        this.$store.commit('setBtnLoading', false)

        if(this.$route.query.redirect) {
          this.$router.push({
            name: this.$route.query.redirect
          })
        }else {
          this.$router.push({
            name: 'InstructionalDesign'
          })
        }

      }).catch(err => {
        console.log(err)
        this.$message.error(err.response.data.detail);
        this.$store.commit('setBtnLoading', false)
      })
    }
  },
}
</script>

<style scoped lang="less">
.login_container {
  width: 100%;
  height: 100%;
  background: url('../assets/img/login_bg.jpg') 0 0 no-repeat;
  background-size: cover;
  position: relative;

  .left_mask {
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,rgba(30, 0, 0, 0.75), rgba(0, 22, 81, 0));
  }

  .login_form {
    position: absolute;
    overflow: auto;
    width: 6.7487rem;
    height: 92%;
    right: 3%;  
    top: 50%;
    transform: translateY(-50%);
    border-radius: 2px;
    background: rgba(255, 255, 255, .95);
    // background: rgba(0, 0, 0, .95);
    padding: .6749rem .7873rem;
    box-sizing: border-box;

    .login_logo {
      width: 2.9019rem;
      height: .6861rem;
    }

    .slogan {
      margin-top: .4499rem;
      h2 {
        color: rgba(10, 15, 44, 0.85);
        font-size: .3374rem;
        margin-bottom: 0;
      }
      p {
        color: rgba(10, 15, 44, 0.6);
        font-size: .225rem;
      }
    }

    .form {
      margin-top: .4499rem;
      /deep/ input {
        border-radius: 0;
      }
      span {
        color: rgba(10, 15, 44, 0.65);
        font-size: .225rem;
        margin-bottom: .0562rem;
        display: inline-block;
      }

      .password {
        margin-top: .3374rem;
      }

      
    }

  }
  .tips {
    margin-top: .6749rem;
    .text {
      color: rgba(154, 0, 0, 1);
    }
  }

  .btn_login {
    width: 100%;
    margin-top: .4499rem;
    border: rgba(255, 119, 119, 1);
    color: #fff;
    background: linear-gradient(135deg,rgba(198, 23, 23, 1), rgba(255, 119, 119, 1), );
  }
  .btn_reg {
    margin-top: 0;
  }

  .reg_form {
    position: absolute;
    overflow: auto;
    width: 6.7487rem;
    height: 92%;
    right: 3%;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 2px;
    background: rgba(255, 255, 255, .95);
    // background: rgba(0, 0, 0, .95);
    // padding: 30px .7873rem;
    padding: 2% 4%;
    box-sizing: border-box;

    .reg_title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .login_logo {
        max-width: 2.9019rem;
        height: .6861rem;
      }

      h1 {
        color: rgba(10, 15, 44, 0.85);
        font-size: .3374rem;
        margin-bottom: 0;
      }
    }

    .reg_form_box {
      margin-top: .3374rem;
      /deep/ .ant-form-item-label label {
        color: rgba(10, 15, 44, 0.65);
        font-size: 16px !important;
      }
      /deep/ .ant-input {
        border-radius: 0 !important;
        background: rgba(230, 230, 230, 1);
      }

      .ant-form-item {
        display: flex;
      }

      /deep/ .ant-form-item-label {
        width: .8998rem;
      }
      /deep/ .ant-form-item-control-wrapper {
        width: calc(100% - .8998rem);
      }

      .ant-form-item {
        margin-bottom: .1687rem;
      }
    }

  }
}
</style>